<template>
    <div class="register-container">
        <h2>注册</h2>
        <el-form :model="form" :rules="rules" ref="registerForm" @submit.prevent="handleRegister">
            <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="User" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="Lock"
                    show-password />
            </el-form-item>
            <el-form-item prop="realName">
                <el-input v-model="form.realName" placeholder="请输入真实姓名" prefix-icon="User" />
            </el-form-item>
            <el-form-item prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号码" prefix-icon="Phone" />
            </el-form-item>
            <el-form-item prop="companyName">
                <el-input v-model="form.companyName" placeholder="请输入公司名称（选填）" prefix-icon="OfficeBuilding" />
            </el-form-item>
            <el-button type="primary" native-type="submit" class="register-btn">
                注册
            </el-button>
            <el-button @click="goToLogin" class="login-link-btn">
                已有账号？去登录
            </el-button>
        </el-form>
    </div>
</template>

<script>
import * as common from '../utils/common'
import { userregister } from '../api/userlogin'
import router from '../router'
export default {
    data() {
        return {
            form: {
                username: '',
                password: '',
                realName: '',
                phone: '',
                companyName: ''
            },
            rules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                realName: [
                    { required: true, message: '真实姓名不能为空', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '手机号码不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleRegister() {
            this.$refs.registerForm.validate(valid => {
                if (valid) {
                    let param = {
                        username: this.form.username,
                        password: this.form.password,
                        realName: this.form.realName,
                        phone: this.form.phone,
                        companyName: this.form.companyName
                    }
                    userregister(param).then(res => {
                        if (res.flag == true) {
                            this.$message.success(res.reason)
                            this.$router.push({ path: '/login' })
                        } else {
                            this.$message.error(res.reason)
                        }
                    }).catch(error => {
                        console.error('注册失败:', error);
                        this.$message.error('注册请求出错，请稍后重试');
                    });
                }
            })
        },
        goToLogin() {
            this.$router.push({ path: '/login' })
        }
    }
}
</script>

<style scoped>
.register-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
}

.register-btn {
    background-color: #409eff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

.login-link-btn {
    background: none;
    border: none;
    color: #409eff;
    text-decoration: underline;
    cursor: pointer;
}
</style>